<template>
	<view class="content">
		<view class="view-stype">
			<!-- <view class="view-lsd">
				<view class="view-flexs">
					<view class="name">健康知识</view>
				</view>
				<view class="arrowleft" @click="goback">
					<tui-icon name="arrowleft" color="#333" :size="28"></tui-icon>
				</view>
			</view> -->
		</view>
		<view class="banner">
			<swiper class="screen-swiper square-dot" indicator-dots="true" circular="true" autoplay="true"
				interval="5000" duration="500">
				<swiper-item v-for="(item,index) in banner" :key="index">
					<image :src="item.img" mode=""></image>
					<!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video> -->
				</swiper-item>
			</swiper>
		</view>
		<view class="tuijian">
			<view class="title">推荐</view>
			<view class="scroll_view">
				<tab @tabChange="tabChange" :tabList="tabList"></tab>
			</view>
			<view class="baoKuan ">
				<view class="" v-if="dataList.length!=0">
					<view class="list flex" v-for="(item,index) in dataList" :key="index" style="padding-bottom: 10rpx;" @click="go_url('/pages/yingyang/zhishidetails?id='+item.id)">
						<view class="chanpin">
							<image :src="item.cover" mode=""></image>
						</view>
						<view class="wenzi flex flex-bt ">
							<view class="left " style="height: auto;margin-bottom: 10rpx;">
							{{item.name}}
							<text style="color: #999;font-weight: normal;font-size: 24rpx;padding-left: 10rpx;">点击查看》</text>
							</view>
						</view>
						
					</view>
				</view>
				<view class="empty-box" v-else>
					<image src="/static/noCart.png" mode=""></image>
					<view class="">暂无数据</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import tab from './components/tab/index';
	export default {
		components: {
			tab,
		},
		data() {
			return {
				title: 'Hello',
				dataList:[],
				page:1,
				banner:'',
				newInfo:'',
				is_new:false,
				isShow:false,
				tabList:[],
				mark:'',
				type:''
			}
		},
		onLoad(e) {
			let that = this
			that.getBanner()
			that.getBiaoqian()
			uni.setNavigationBarTitle({
				title: '健康知识'
			})
		},
		onShow(){
			let that = this
		},
		onReachBottom() {
			let that = this
			that.page++
			that.get_list()
		},
		methods: {
			go_url(e){
				this.tui.href(e)
			},
			goback(){
				uni.navigateBack()
			},
			hide(){
				this.is_new = false
			},
			zhixiao(){
				let that = this
				uni.setStorageSync('new_id',that.newInfo.id)
				that.is_new = false
			},
			getBanner(){
				let that = this
				that.tui.request("api.nutrition/banner", "POST", {}, false, false, true).then((res) => {
					console.log(res)
					if(res.code==1){
						that.banner = res.data.banner_recipe
						
					}
				}).catch((res) => {
					that.is_btn = false
				})
			},
			getBiaoqian(){
				let that = this
				that.tui.request("api.nutrition/markList", "GET", {type:1}, false, true, true).then((res) => {
					// that.tui.toast(res.info)
					if(res.code==1){
						res.data.list.map((item,index)=>{
							item.key = index
						})
						that.tabList = res.data.list
						that.mark = res.data.list[0].name
						that.dataList=[]
						that.page=1
						that.get_list()
					}
				}).catch((res) => {})
			},
			get_list(){
				let that = this
				
				that.tui.request("api.nutrition/articleList", "GET", {type:1,page:that.page,mark:that.mark}, false, true, true).then((res) => {
					that.dataList = that.dataList.concat(res.data.list) 
				}).catch((res) => {})
			},
			tabChange: function(t) {
				let that = this
				console.log(t)
				that.dataList=[]
				that.page=1
				that.mark = that.tabList[t.detail.index].name
				that.get_list()
			},
		}
	}
</script>
<style lang="scss">
	page{background: #f4f7fd;padding-bottom: 10rpx;}
	.baoKuan{border-radius:10rpx;padding:20rpx 20rpx 0rpx;position: relative;
		.list{background: #fff;margin-bottom: 30rpx;border-radius: 10rpx;position: relative;
			.chanpin{width: 346rpx;height: 250rpx;margin: 0 auto;
				image{width: 340rpx;height: 250rpx;border-radius: 10rpx;}
			}
			.miaoshu{
				text{display: inline-block;margin-left: 20rpx;font-size: 24rpx;background: #9dcf7c;color: #333;padding: 4rpx 10rpx;border-radius: 6rpx;margin-bottom: 10rpx;}
			}
			.wenzi{margin: 30rpx 10rpx;font-weight: bold;
				.left{color: #333;font-size: 28rpx;height: 66rpx;}
				.right{color: #fdf13c;align-items: baseline;
					.fuhao{font-size: 24rpx;}
					.price{font-weight: bold;font-size: 38rpx;}
				}
			}
			.btns{position: absolute;bottom: -30rpx;left: 0;width: 100%;text-align: center;
				image{width: 154rpx;height: 50rpx;}
			}
		}
		.list:nth-child(2n){margin-right: 0;}
	}
	.view-stype{
	    background:linear-gradient(to bottom,#a1ffc6 40%,#fbfffb);
	    height: 80rpx;
	    background-size: cover;
		.view-lsd{
		    padding-top: 110rpx;
		    padding-left: 40rpx;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    padding-right: 40rpx;position: relative;
			.arrowleft{position: absolute;left: 30rpx;bottom: -10rpx;}
			.view-flexs{
			    display: flex;
			    align-items: center;
				view{
					font-size: 32rpx;width: 200rpx;text-align: center;
					font-family: PingFang SC;
					font-weight: 600;
				}
				.name{
				    color: #121212;
				}
				.anames{
				    color: #666;
				}
			}
		}
	}
	.banner{
		padding: 20rpx 25rpx ;background: #fff;position: relative;
		height: 300rpx;
		margin: 0rpx auto 20rpx;
		border-radius: 10rpx;
		.screen-swiper{position: absolute;top: -40rpx;left:25rpx;
			height: 100%;width: 700rpx;
			image{
				width: 100%;
				height: 300rpx;
				border-radius: 10rpx;
			}
		}
	}
	.tuijian{
		.title{padding-left: 20rpx;margin: 20rpx 0;font-weight: bold;}
	}
	.new_info{
		.title{font-size: 40rpx;margin-bottom: 20rpx;}
		.scroll-Y{max-height: 500rpx;}
		.btn{ background: linear-gradient(90deg, #4fe9ab, #33c6ac);padding: 20rpx 0;color: #fff;margin-top: 30rpx;border-radius: 10rpx;}
	}
</style>
